<template>
  <p-form-model ref="form" :model="form" :rules="rules">
    <div class="item item-left">
      <p-form-model-item :label="label.serialNumber" prop="serialNumber">
        <span>{{ form.serialNumber }}</span>
      </p-form-model-item>
      <p-form-model-item :label="label.name" prop="name">
        <p-input v-model="form.name" placeholder="请输入" />
      </p-form-model-item>
      <p-form-model-item ref="time" :label="label.startTime" prop="startTime">
        <!-- <p-range-picker
          :allow-clear="false"
          :value="form.startTime"
          :placeholder="['开始时间', '结束时间']"
          format="YYYY-MM"
          :mode="['month', 'month']"
          @panelChange="handleRangeChange"
        /> -->
        <p-input v-show="false" v-model="form.startTime"></p-input>
        <MonthRangPicker
          :start.sync="form.startTime"
          :end.sync="form.endTime"
          @blur="
            () => {
              $refs.time.onFieldBlur();
            }
          "
          @change="
            () => {
              $refs.time.onFieldChange();
            }
          "
        />
      </p-form-model-item>
    </div>
    <div class="item item-right">
      <p-form-model-item :label="label.state">
        <span>草稿</span>
      </p-form-model-item>
      <p-form-model-item
        :label="label.salesOrganization"
        prop="salesOrganization"
      >
        <SelectOrg
          :value="form.salesOrganization"
          :has-all="false"
          :allow-clear="false"
          @input="handleOrgChange"
        />
      </p-form-model-item>
      <p-form-model-item :label="label.deadlineTime" prop="deadlineTime">
        <p-date-picker
          show-time
          :value="form.deadlineTime"
          :allow-clear="false"
          :disabled-date="disabledDate"
          placeholder="请选择时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          @change="handleDeadLineChange"
          @ok="handleDeadLineOk"
        />
      </p-form-model-item>
    </div>
  </p-form-model>
</template>

<script>
import monent from 'moment';
import MonthRangPicker from '@/components/picker/MonthRangePicker.vue';
import { PLAN_TYPE } from '@/constants';

export default {
  components: { MonthRangPicker },
  props: {
    form: {
      type: Object,
      default: () => {},
    },
    dataSource: {
      type: Array,
      default: () => [],
    },
    planType: {
      type: String,
      default: 'BP',
    },
  },
  data() {
    return {
      rules: {
        name: [{ required: true, message: '请输入名称！', trigger: 'blur' }],
        salesOrganization: [
          { required: true, message: '请选择销售组织', trigger: 'blur' },
        ],
        startTime: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value && this.form.endTime) {
                callback();
              } else {
                callback(new Error(rule.message));
              }
            },
            message: '请选择长度区间',
            trigger: 'change',
          },
        ],
        deadlineTime: [
          { required: true, message: '请选择录入截止时间', trigger: 'change' },
        ],
      },
      isFirst: true,
    };
  },
  computed: {
    label() {
      return {
        serialNumber: `${PLAN_TYPE[this.planType]}编号`,
        name: `${PLAN_TYPE[this.planType]}名称`,
        startTime: `${PLAN_TYPE[this.planType]}长度区间`,
        state: '当前状态',
        salesOrganization: '销售组织',
        deadlineTime: '录入截止时间',
      };
    },
    uid() {
      return this.$store.state.user.uid;
    },
  },
  methods: {
    disabledDate(val) {
      return monent().endOf('day').subtract(1, 'day').valueOf() > val.valueOf();
    },
    handleOrgChange(val, isDefault) {
      if (this.form.salesOrganization && !isDefault && this.dataSource.length) {
        this.$confirm('该操作将清空销售责任人的列表信息，是否确认？')
          .then(() => {
            this.form.salesOrganization = val;
            this.$emit('clear-list');
          })
          .catch(() => {
            // console.log('e: ', e);
          });
      } else {
        this.form.salesOrganization = val;
      }
    },
    setForm(serialNumber) {
      this.form.serialNumber = serialNumber;
    },
    validate() {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          resolve(valid);
        });
      });
    },
    handleRangeChange(value) {
      this.form.startTime = value;
    },
    handleDeadLineChange(value) {
      const formatTime = monent(value).format('YYYY-MM-DD HH:mm:ss');
      this.form.deadlineTime = formatTime;
    },
    handleDeadLineOk(value) {
      const formatTime = monent(value).format('YYYY-MM-DD HH:mm:ss');
      this.form.deadlineTime = formatTime;
    },
  },
};
</script>

<style lang="less" scoped>
.poros-form {
  display: flex;
  justify-content: space-between;
}
.poros-form-item {
  display: flex;
  //   margin-bottom: 10px;
}
.item {
  width: 48%;
  display: inline-block;
}
// .poros-form-item {
//   width: 48%;
// }
/deep/ .poros-form-item-label {
  width: 120px;
  margin-right: 20px;
}
/deep/ .poros-form-item-control-wrapper {
  width: calc(100% - 180px);
}
</style>
